<template>
  <div v-loading="detailInfoShow">
    <div class="requestAdd" v-if="!selectionMaterialShow">
      <!-- 筛选按钮 -->
      <div class="search-button" v-if="!contactAddShow">
        <el-button
          v-if="pageType === 'check' && route.name === 'RequestCheck'"
          class="btn save"
          @click="handleCheckBtn2(projectFormRef, 3, '同意')"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >同意</el-button
        >
        <el-button
          v-if="pageType === 'check' && route.name === 'RequestCheck'"
          class="btn withdraw"
          @click="handleCheckBtn2(projectFormRef, 4, '拒绝')"
          ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
          >拒绝</el-button
        >

        <el-button
          v-if="pageType === 'check' && route.name === 'RequestCheck'"
          class="btn withdraw"
          @click="handleCheckBtn2(projectFormRef, 6, '驳回')"
          ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
          >驳回</el-button
        >
        <el-button
          v-if="pageType !== 'detail' && pageType !== 'check'"
          class="btn submit"
          @click="handleAddSave(requestFormRef, 1)"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >提交</el-button
        >
        <el-button
          v-if="pageType !== 'detail' && pageType !== 'check'"
          class="btn save"
          @click="handleAddSave(requestFormRef, 0)"
          ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
          >存为草稿</el-button
        >
        <el-button class="btn direction" @click="handleBack"
          ><el-icon class="icon" color="#fff"> <Back /> </el-icon
          >返回</el-button
        >
      </div>
      <el-collapse v-model="activeNames">
        <!-- 基础信息 -->
        <el-collapse-item
          name="1"
          v-if="!contactAddShow"
          class="transform-down"
        >
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title"
              >{{
                pageType !== "detail" && pageType !== "check"
                  ? pageType === "add"
                    ? "新增"
                    : "编辑"
                  : ""
              }}请购信息</span
            >
          </template>
          <div class="request-info">
            <el-form
              :model="requestForm"
              ref="requestFormRef"
              :rules="queryRules"
              label-width="100px"
              v-enterToNext
              :disabled="pageType === 'detail' || pageType === 'check'"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="请购编号：">
                    <el-input
                      disabled
                      v-model="requestForm.purchaseApplyCode"
                      placeholder="自动获取"
                      clearable
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="申请日期："
                    prop="applicantDate"
                    label-width="135"
                  >
                    <el-date-picker
                      v-model="requestForm.applicantDate"
                      format="YYYY/MM/DD"
                      class="search-input"
                      value-format="YYYY-MM-DD"
                      type="date"
                      placeholder="请选择"
                      ref="refSelect"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="申请人："
                    prop="applicantId"
                    label-width="135"
                  >
                    <el-select
                      v-model="requestForm.applicantId"
                      placeholder="请选择"
                      clearable
                      filterable
                      class="search-input"
                      @change="handleUserChange"
                      value-key="userId"
                      placement="bottom-end"
                    >
                      <!-- <el-option
                        v-for="dict in userList"
                        :key="dict.userId"
                        :label="dict.nickName"
                        :value="dict.userId"
                      /> -->
                      <el-option disabled :value="null">
                        <div class="auto-top">
                          <span class="auto-item">人员姓名</span>
                          <span class="auto-item">联系方式</span>
                          <span class="auto-item">职位</span>
                          <span class="auto-item">部门</span>
                        </div>
                      </el-option>
                      <el-option
                        v-for="dict in userList"
                        :key="dict.userId"
                        :value="dict.userId"
                        :label="dict.nickName"
                      >
                        <div style="display: flex">
                          <div class="auto-item" :title="dict.nickName">
                            {{ dict.nickName }}
                          </div>
                          <div class="auto-item" :title="dict.phonenumber">
                            {{ dict.phonenumber ? dict.phonenumber : "--" }}
                          </div>
                          <div class="auto-item" :title="dict.postName">
                            {{ dict.postName ? dict.postName : "--" }}
                          </div>
                          <div class="auto-item" :title="dict.fullDeptName">
                            {{ dict.fullDeptName ? dict.fullDeptName : "--" }}
                          </div>
                        </div>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="申请部门：" label-width="135">
                    <el-input
                      disabled
                      v-model="requestForm.deptName"
                      placeholder="自动获取"
                      clearable
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="6">
                  <el-form-item label="采购类型：" prop="applicantType">
                    <el-select
                      v-model="requestForm.applicantType"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      @change="handleType"
                    >
                      <el-option
                        v-for="dict in typeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="期望交付日期："
                    prop="deliveryDate"
                    label-width="135"
                  >
                    <el-date-picker
                      v-model="requestForm.deliveryDate"
                      format="YYYY/MM/DD"
                      class="search-input"
                      value-format="YYYY-MM-DD"
                      type="date"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="
                    requestForm.applicantType == 0 ||
                    requestForm.applicantType == 1
                  "
                >
                  <el-form-item
                    label="项目名称："
                    :prop="requestForm.applicantType == 0 ? 'projectId' : ''"
                    label-width="135"
                  >
                    <el-select
                      v-model="requestForm.projectId"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      @change="handleProjectChange"
                    >
                      <!-- <el-option
                        v-for="dict in projectList"
                        :key="dict.projectId"
                        :label="dict.projectName"
                        :value="dict.projectId"
                      /> -->
                      <el-option key="0" label="" value="" disabled>
                        <span style="float: left; color: #8492a6"
                          >项目编号</span
                        >
                        <span style="margin: 0 80px 0 100px; color: #8492a6"
                          >项目名称</span
                        >
                        <span
                          style="
                            margin: 0 50px 0 0px;
                            color: #8492a6;
                            font-size: 13px;
                          "
                          >项目类别</span
                        >
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                          >项目类型</span
                        >
                      </el-option>
                      <el-option
                        v-for="item in projectList"
                        :key="item.projectId"
                        :label="item.projectName"
                        :value="item.projectId"
                      >
                        <span style="float: left; color: #8492a6">{{
                          item.projectCode
                        }}</span>
                        <span
                          style="
                            display: inline-block;
                            width: 125px;
                            margin: 0 10px 0 23px;
                            color: #8492a6;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                          :title="item.projectName"
                          >{{ item.projectName }}</span
                        >
                        <span style="float: right; font-size: 13px">
                          {{ item.projectTypeName }}
                        </span>
                        <span
                          style="
                            float: right;
                            margin: 0 75px 0 0px;
                            font-size: 13px;
                          "
                        >
                          {{ item.projectCategoryName }}
                        </span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="requestForm.applicantType == 0">
                  <el-form-item label="项目状态：" label-width="135">
                    <el-input
                      disabled
                      v-model="requestForm.includeContractName"
                      placeholder="自动获取"
                      clearable
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="[1, 2, 3].includes(requestForm.applicantType)"
                >
                  <el-form-item
                    label="预算金额："
                    prop="budgetAmount"
                    label-width="135"
                  >
                    <el-input
                      type="Number"
                      :precision="2"
                      v-model="requestForm.budgetAmount"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="requestForm.applicantType == 1">
                  <el-form-item label="运维工单：">
                    <el-select
                      v-model="requestForm.workOrderId"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                    >
                      <el-option
                        v-for="dict in workList"
                        :key="dict.workOrderId"
                        :label="dict.workOrderName"
                        :value="dict.workOrderId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="requestForm.applicantType == 3">
                  <el-form-item
                    label="是否为云服务器："
                    prop="cloudServer"
                    label-width="135"
                  >
                    <el-select
                      v-model="requestForm.cloudServer"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                    >
                      <el-option
                        v-for="dict in [
                          { value: 1, label: '是' },
                          { value: 0, label: '否' },
                        ]"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="申请事由：" prop="applicantReason">
                    <el-input
                      :maxlength="2000"
                      style="width: 100%"
                      v-model="requestForm.applicantReason"
                      type="textarea"
                      placeholder="需说明采购物品用途或使用范围"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注：">
                    <el-input
                      :maxlength="2000"
                      style="width: 100%"
                      v-model="requestForm.remarks"
                      type="textarea"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <!-- 添加物料 -->
        <el-collapse-item
          name="2"
          style="position: relative"
          v-if="contactAddShow"
          class="transform-up"
        >
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title">添加物料</span>
            <div class="nofixed-search-button button-position">
              <el-button class="btn save" @click.stop="handleHand"
                ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                >手动添加</el-button
              >
              <el-button class="btn submit" @click.stop="handleMaterial"
                ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                >选择物料</el-button
              >
            </div>
          </template>
          <div class="request-info">
            <el-form
              :model="contactForm"
              ref="contactFormRef"
              :rules="queryContactRules"
              label-width="100px"
              v-enterToNext
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item label="物料编号：">
                    <el-input
                      v-model="contactForm.materialCode"
                      :placeholder="
                        addType == 'manual'
                          ? '手动添加不生成物料编号'
                          : '自动生成'
                      "
                      clearable
                      class="search-input"
                      disabled=""
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="物料名称：" prop="materialName">
                    <el-input
                      :disabled="contactForm.materialCode !== ''"
                      ref="refInput"
                      v-model="contactForm.materialName"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      :maxlength="20"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="出厂型号：" prop="factoryCode">
                    <el-input
                      :disabled="contactForm.materialCode !== ''"
                      v-model="contactForm.factoryCode"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      :maxlength="20"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="技术参数：" prop="technologyParameter">
                    <el-input
                      :disabled="contactForm.materialCode !== ''"
                      v-model="contactForm.technologyParameter"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      :maxlength="20"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="6">
                  <el-form-item label="单位：" prop="materialUnit">
                    <el-select
                      :disabled="contactForm.materialCode !== ''"
                      v-model="contactForm.materialUnit"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      @change="handleUnitChange"
                    >
                      <el-option
                        v-for="dict in unitList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="请购数量：" prop="purchaseNumber">
                    <el-input
                      type="Number"
                      v-model="contactForm.purchaseNumber"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      @blur="handlePrice"
                      min="1"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="供应商：">
                    <el-select
                      filterable
                      v-model="contactForm.supplierId"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      :disabled="contactForm.materialCode !== ''"
                      @change='handleSupplier'
                    >
                      <template v-if="suppliereList.length">
                        <el-option disabled :value="{}">
                          <div class="auto-top">
                            <span class="auto-item">供应商编号</span>
                            <span class="auto-item">供应商简称</span>
                            <span class="auto-item">供应商全称</span>
                            <span class="auto-item">供应商地址</span>
                          </div>
                        </el-option>
                        <el-option
                          v-for="dict in suppliereList"
                          :key="dict.supplierId"
                          :value="dict.supplierId"
                          :label="dict.supplierName"
                        >
                          <div style="display: flex">
                            <div class="auto-item" :title="dict.supplierCode">
                              {{ dict.supplierCode }}
                            </div>
                            <div
                              class="auto-item"
                              :title="dict.supplierAbbreviation"
                            >
                              {{ dict.supplierAbbreviation }}
                            </div>
                            <div class="auto-item" :title="dict.supplierName">
                              {{ dict.supplierName }}
                            </div>
                            <div
                              class="auto-item"
                              :title="
                                dict.provinceName
                                  ? `${dict.provinceName}${dict.cityName}${dict.areaName}`
                                  : ''
                              "
                            >
                              {{ dict.provinceName }}{{ dict.cityName
                              }}{{ dict.areaName }}
                            </div>
                          </div>
                        </el-option>
                      </template>

                      <template v-else>
                        <el-option
                          v-for="dict in []"
                          :key="dict.supplierId"
                          :label="dict.supplierId"
                          :value="dict.supplierId"
                        />
                      </template>
                    </el-select>
                    <!-- <el-autocomplete
                      :disabled="contactForm.materialCode !== ''"
                      popper-class="autoclass"
                      v-model="contactForm.supplierName"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入"
                      @select="handleSuppliereSelect"
                      style="width: 268px"
                      clearable
                      placement="bottom-end"
                    >
                      <template #default="{ item }">
                        <div class="auto-top" style="display: flex">
                          <div class="auto-item">供应商编号</div>
                          <div class="auto-item">供应商简称</div>
                          <div class="auto-item">供应商全称</div>
                          <div class="auto-item">供应商地址</div>
                        </div>
                        <div style="display: flex; width: 500px">
                          <div class="auto-item" :title="item.supplierCode">
                            {{ item.supplierCode }}
                          </div>
                          <div
                            class="auto-item"
                            :title="item.supplierAbbreviation"
                          >
                            {{ item.supplierAbbreviation }}
                          </div>
                          <div class="auto-item" :title="item.supplierName">
                            {{ item.supplierName }}
                          </div>
                          <div
                            class="auto-item"
                            :title="`${item.provinceName}${item.cityName}${item.areaName}`"
                          >
                            {{ item.provinceName }}{{ item.cityName
                            }}{{ item.areaName }}
                          </div>
                        </div>
                      </template>
                    </el-autocomplete> -->
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="生产厂商：">
                    <el-select
                    @change='handleManufacturer'
                      filterable
                      v-model="contactForm.manufacturerId"
                      placeholder="请选择"
                      clearable
                      class="search-input"
                      :disabled="contactForm.materialCode !== ''"
                    >
                      <template v-if="suppliereList.length">
                        <el-option disabled :value="{}">
                          <div class="auto-top">
                            <span class="auto-item">供应商编号</span>
                            <span class="auto-item">供应商简称</span>
                            <span class="auto-item">供应商全称</span>
                            <span class="auto-item">供应商地址</span>
                          </div>
                        </el-option>
                        <el-option
                          v-for="dict in suppliereList"
                          :key="dict.supplierId"
                          :value="dict.supplierId"
                          :label="dict.supplierName"
                        >
                          <div style="display: flex">
                            <div class="auto-item" :title="dict.supplierCode">
                              {{ dict.supplierCode }}
                            </div>
                            <div
                              class="auto-item"
                              :title="dict.supplierAbbreviation"
                            >
                              {{ dict.supplierAbbreviation }}
                            </div>
                            <div class="auto-item" :title="dict.supplierName">
                              {{ dict.supplierName }}
                            </div>
                            <div
                              class="auto-item"
                              :title="
                                dict.provinceName
                                  ? `${dict.provinceName}${dict.cityName}${dict.areaName}`
                                  : ''
                              "
                            >
                              {{ dict.provinceName }}{{ dict.cityName
                              }}{{ dict.areaName }}
                            </div>
                          </div>
                        </el-option>
                      </template>

                      <template v-else>
                        <el-option
                          v-for="dict in []"
                          :key="dict.supplierId"
                          :label="dict.supplierId"
                          :value="dict.supplierId"
                        />
                      </template>
                    </el-select>
                    <!-- <el-autocomplete
                      :disabled="contactForm.materialCode !== ''"
                      popper-class="autoclass"
                      v-model="contactForm.manufactureName"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入"
                      @select="handleSuppliereSelect"
                      style="width: 268px"
                      clearable
                      placement="bottom-end"
                    >
                      <template #default="{ item }">
                        <div class="auto-top" style="display: flex">
                          <div class="auto-item">供应商编号</div>
                          <div class="auto-item">供应商简称</div>
                          <div class="auto-item">供应商全称</div>
                          <div class="auto-item">供应商地址</div>
                        </div>
                        <div style="display: flex; width: 500px">
                          <div class="auto-item" :title="item.supplierCode">
                            {{ item.supplierCode }}
                          </div>
                          <div
                            class="auto-item"
                            :title="item.supplierAbbreviation"
                          >
                            {{ item.supplierAbbreviation }}
                          </div>
                          <div class="auto-item" :title="item.supplierName">
                            {{ item.supplierName }}
                          </div>
                          <div
                            class="auto-item"
                            :title="`${item.provinceName}${item.cityName}${item.areaName}`"
                          >
                            {{ item.provinceName }}{{ item.cityName
                            }}{{ item.areaName }}
                          </div>
                        </div>
                      </template>
                    </el-autocomplete> -->
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="单价：" prop="purchasePrice">
                    <el-input
                      type="Number"
                      v-model="contactForm.purchasePrice"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      @blur="handlePrice"
                    >
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="总价：">
                    <el-input
                      disabled
                      v-model="contactForm.allPrice"
                      placeholder="自动获取"
                      clearable
                      class="search-input"
                    >
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="历史价格：" prop="historicalPrice">
                    <el-input
                      type="Number"
                      v-model="contactForm.historicalPrice"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                    >
                      <template #append>元</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="到货周期：">
                    <el-input
                      v-model="contactForm.deliveryCycle"
                      placeholder="如：一周内。方便采购了解优先级，以保障供应时效"
                      clearable
                      class="search-input"
                      :maxlength="20"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="参考链接：">
                    <el-input
                      v-model="contactForm.referenceLink"
                      placeholder="请输入"
                      clearable
                      class="search-input"
                      :maxlength="2000"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="物料图片：">
                    <Upload
                      :fileList="contactForm.suppFileInfoVos"
                      :limit="5"
                      :isFull="true"
                      :isCanDelete="true"
                      :showButton="true"
                      accept=".jpg,.png"
                      @success="(result) => uploadSuccess(result)"
                      @deleteFile="(result) => uploadRemove(result)"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <!-- 联系人列表 -->
        <el-collapse-item
          name="3"
          style="position: relative"
          :class="!contactAddShow ? 'transform-down' : ''"
        >
          <template #title>
            <span class="circle"></span>
            <span class="collapse-title">物料列表</span>
            <div
              v-if="
                pageType !== 'detail' && pageType !== 'check' && !contactAddShow
              "
              class="nofixed-search-button button-position"
            >
              <el-button class="btn add" @click.stop="handleContactOperate"
                ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                >添加</el-button
              >
            </div>
            <div
              class="nofixed-search-button button-position"
              v-else
              v-if="pageType !== 'detail' && pageType !== 'check'"
            >
              <el-button
                class="btn add"
                @click.stop="handleContactAdd(contactFormRef)"
                ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                >添加</el-button
              >
              <el-button class="btn direction" @click.stop="handleRequestBack"
                ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                >关闭</el-button
              >
            </div>
          </template>
          <div class="contact-info">
            <!-- 表格数据 -->
            <el-table
              :data="requestForm.purchaseMaterialRespVos"
              border
              :height="
                pageType === 'detail' || pageType === 'check'
                  ? '100%'
                  : contactAddShow
                  ? '320px'
                  : '280px'
              "
              :header-cell-style="{ 'text-align': 'center' }"
              show-summary
              sum-text="合计"
              :summary-method="getSummaries"
            >
              <!-- 操作模式 -->
              <el-table-column
                label="操作"
                align="center"
                :show-overflow-tooltip="true"
                width="100px"
                v-if="pageType !== 'detail' && pageType !== 'check'"
              >
                <template #default="{ row, $index }">
                  <div class="table-operate">
                    <img
                      src="@/assets/icons/images/edit.png"
                      class="table-icon"
                      title="编辑"
                      @click="handleOperate('edit', row, $index)"
                    />
                    <img
                      src="@/assets/icons/images/delete.png"
                      class="table-icon"
                      title="删除"
                      @click="handleOperate('delete', row, $index)"
                    />
                  </div> </template
              ></el-table-column>
              <el-table-column
                label="物料编号"
                prop="materialCode"
                :show-overflow-tooltip="true"
                min-width="160"
              >
                <template #default="{ row }">
                  <span>{{ row.materialCode ? row.materialCode : "--" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="物料名称"
                prop="materialName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="出厂型号"
                prop="factoryCode"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="技术参数"
                prop="technologyParameter"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="单位"
                prop="materialUnitName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="请购数量"
                prop="purchaseNumber"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="单价（元）"
                prop="purchasePrice"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="总价（元）"
                prop="allPrice"
                :show-overflow-tooltip="true"
                min-width="160"
              >
                <!-- <template #default="{ row }">
                  {{ row.purchasePrice * row.purchaseNumber }}
                </template> -->
              </el-table-column>
              <el-table-column
                label="历史价格（元）"
                prop="historicalPrice"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="到货周期"
                prop="deliveryCycle"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="物料图片"
                prop=""
                :show-overflow-tooltip="true"
                min-width="200"
              >
                <template #default="{ row }">
                  <div v-if="row.suppFileInfoVos" class="image-content">
                    <el-image
                      v-for="(item, index) in row.suppFileInfoVos"
                      :key="index"
                      :preview-teleported="true"
                      style="width: 50px; height: 50px; margin-right: 5px"
                      :src="item.url"
                      :preview-src-list="showImg(item.url)"
                    >
                      <template #error>
                        <div class="image-slot">
                          <el-icon><icon-picture /></el-icon>
                        </div>
                      </template>
                    </el-image>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="参考链接"
                prop="referenceLink"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="供应商"
                prop="supplierName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="生产厂商"
                prop="manufactureName"
                :show-overflow-tooltip="true"
                min-width="160"
              />
              <el-table-column
                label="采购跟踪"
                prop="purchaseTrackingStatusName"
                :show-overflow-tooltip="true"
                min-width="160"
                v-if="requestForm.checkStatus == 3"
              />
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <SelectionMaterial
      ref="selectionMaterialRef"
      v-if="selectionMaterialShow"
      v-model:selectionMaterialShow="selectionMaterialShow"
      @submitChoose="handleSelectMaterial"
    />

    <el-dialog
      :title="title"
      v-model="auditDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="审核备注：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="auditRemark"
          placeholder=""
          type="textarea"
          maxlength="2000"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            v-if="auditResult == 3"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >同意</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 4"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >拒绝</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 6"
            @click="saveCheck()"
            v-loading="loadingCheck"
          >
            驳回</el-button
          >
          <el-button style="background-color: #fff" @click="closeAudit()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Picture as IconPicture } from "@element-plus/icons-vue";
import SelectionMaterial from "./selectionMaterial";
import Upload from "@/components/Upload/index";
import { checkRequestApi } from "@/api/purchase/request";
import useUserStore from "@/store/modules/user";
import {
  getProvinceApi,
  getUserListApi,
  getDeptListApi,
  addCustomerApi,
  editCustomerApi,
  getCustomerDetailApi,
} from "@/api/information/customer";
import { getProjectListApi } from "@/api/sales/project";
import {
  addRequestApi,
  editRequestApi,
  getRequestDetailApi,
  getRequestTableApi,
  getWorkListApi,
  projectListRequest,
} from "@/api/purchase/request";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import { getSupplierListApi } from "@/api/information/supplier";
// const userInfo = await useUserStore().getInfo();
const userStore = useUserStore();
const route = useRoute();
const emit = defineEmits([
  // 客户新增组件显隐
  "requestAddShow",
  // 更新客户新增组件显隐
  "update:requestAddShow",
  // 刷新父组件表格数据
  "refreshList",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});

// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 客户表单引用
const requestFormRef = ref();
// 联系人表单引用
const contactFormRef = ref();
// 选择审核
const auditDialogShow = ref(false);
const loadingCheck = ref(false);
// 联系人操作类型
const operateType = ref("");
// 新增联系人表单显隐
const contactAddShow = ref(false);
// 选择物料显隐
const selectionMaterialShow = ref(false);
// 详情加载效果
const detailInfoShow = ref(false);
// 输入框引用
const refInput = ref();
// 下拉框引用
const refSelect = ref();
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 采购类型列表
const typeList = ref([]);
// 单位列表
const unitList = ref([]);
// 供应商列表
const suppliereList = ref([]);
// 项目列表
const projectList = ref([]);
// 运维工单
const workList = ref([]);

// 客户表单数据模板
const requestFormTemplate = {
  applicantDate: "", // 申请日期
  applicantId: null, // 申请人id
  applicantReason: "", // 	申请理由
  applicantType: null, // 请购类型
  budgetAmount: null, // 预算金额
  checkStatus: null, // 请购审核状态
  cloudServer: null, // 是否为云服务器(0:是,1：否）
  deliveryDate: "", // 期望交付日期
  projectId: null, // 关联项目id
  purchaseApplyCode: "", // 采购申请编号
  purchaseMaterialRespVos: [], // 采购申请物料信息对象
  remarks: "", // 备注
  type: 0, // 	按钮类型0：存为草稿；1；提交
  workOrderId: null, // 	运维工单id
  deptName: "", // 申请部门
  projectStatus: "", // 项目状态
  includeContractName: "", // 中文
};
// 联系人表单数据模板
const contactFormTemplate = {
  deliveryCycle: "", // 到货周期
  factoryCode: "", // 出厂编号
  manufactureName: "", // 生产厂商名称
  manufacturerId: null, // 生产厂商(也是供应商id)
  manufacturerIdName: "", // 生产厂商全称（详情专用）
  materialCode: "", // 	物料编号
  materialName: "", // 	物料名称
  materialUnit: null, // 	物料单位
  materialUnitName: "", // 物料单位中文
  purchaseApplyId: null, // 关联请购申请表主键id
  purchaseMaterialId: null,
  purchaseNumber: null, // 请购数量
  purchasePrice: null, // 	请购单价
  historicalPrice: null, // 	历史价格
  allPrice: null, // 总价
  purchaseTrackingStatus: null, // 请购跟踪状态
  purchaseTrackingStatusName: "", // 	请购跟踪状态中文
  referenceLink: "", // 参考链接
  remarks: "", // 备注
  suppFileInfoVos: [], // 采购申请物料图片
  supplierId: null, // 供应商id
  supplierIdName: "", // 供应商全称（详情专用）
  supplierName: "", // 供应商名称
  technologyParameter: "", // 技术参数
};
const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),
  // 联系人表单
  contactForm: JSON.parse(JSON.stringify(contactFormTemplate)),
  // 客户表单校验规则
  queryRules: {
    applicantDate: [
      { required: true, message: "请选择申请日期", trigger: "change" },
    ],
    applicantId: [
      { required: true, message: "请选择申请人", trigger: "change" },
    ],
    applicantType: [
      { required: true, message: "请选择采购类型", trigger: "change" },
    ],
    deliveryDate: [
      { required: true, message: "请选择期望交付日期", trigger: "change" },
    ],
    projectId: [
      { required: true, message: "请选择项目名称", trigger: "change" },
    ],
    workOrderId: [
      { required: true, message: "请选择运维工单", trigger: "change" },
    ],
    cloudServer: [
      { required: true, message: "请选择是否为云服务器", trigger: "change" },
    ],
    budgetAmount: [
      { required: true, message: "请输入预算金额", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value > 9999999 || value < 0) {
            callback(new Error("预算金额为0到9999999之间的数字"));
          } else {
            if (value.toString().split(".")[1]?.length > 2) {
              callback(new Error("预算金额小数点后最多两位"));
            } else {
              callback();
            }
          }
        },
      },
    ],
    applicantReason: [
      { required: true, message: "请输入申请事由", trigger: "blur" },
    ],
  },
  // 联系人表单校验规则
  queryContactRules: {
    materialName: [
      {
        required: true,
        message: "请输入物料名称",
        trigger: ["blur", "change"],
      },
    ],
    factoryCode: [
      { required: true, message: "请输入出厂型号", trigger: "blur" },
    ],
    technologyParameter: [
      { required: true, message: "请输入技术参数", trigger: "blur" },
    ],
    materialUnit: [
      { required: true, message: "请选择单位", trigger: "change" },
    ],
    purchaseNumber: [
      { required: true, message: "请输入请购数量", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value > 9999999 || value < 1) {
            callback(new Error("请购数量为1到9999999之间的数字"));
          } else {
            if (value.toString().split(".").length > 1) {
              callback(new Error("请购数量不能有小数点"));
            } else {
              callback();
            }
          }
        },
      },
    ],
    purchasePrice: [
      {
        validator: (rule, value, callback) => {
          if (value) {
            if (value > 999999 || value < 1) {
              callback(new Error("单价为1到999999之间的数字"));
            } else {
              if (value.toString().split(".")[1]?.length > 2) {
                callback(new Error("单价小数点后最多两位"));
              } else {
                callback();
              }
            }
          } else {
            callback();
          }
        },
      },
    ],
    historicalPrice: [
      {
        validator: (rule, value, callback) => {
          if (value) {
            if (value > 999999 || value < 0) {
              callback(new Error("历史价格0到999999之间的数字"));
            } else {
              if (value.toString().split(".")[1]?.length > 2) {
                callback(new Error("历史价格小数点后最多两位"));
              } else {
                callback();
              }
            }
          } else {
            callback();
          }
        },
      },
    ],
  },
  // 角色列表
  contactTypeList: [],
  // 所属行业列表
  industryList: [],
  // 用户列表
  userList: [],
  auditRemark: "",
  auditResult: "",
  applyId: "",
});

const {
  requestForm,
  contactForm,
  queryRules,
  queryContactRules,
  contactTypeList,
  industryList,
  userList,
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);

const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 3) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  (applyId.value = requestForm.value.purchaseApplyId),
    (auditDialogShow.value = true);
  loadingCheck.value = false;
};

const saveCheck = async () => {
  if (auditRemark.value === null || auditRemark.value === "") {
    ElMessage.error("审核备注不能为空");
    return;
  }

  const obj = {
    checkStatus: auditResult.value,
    purchaseApplyId: applyId.value,
    auditRemark: auditRemark.value,
  };
  try {
    loadingCheck.value = true;
    const res = await checkRequestApi(obj);
    auditDialogShow.value = false;

    //loadingCheck.value =false;

    if (res.code === 200) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
      return;
    }
    loadingCheck.value = false;
    emit("update:requestAddShow", false);
    emit("refreshList", false);
  } catch (error) {
    loadingCheck.value = false;
    emit("update:requestAddShow", false);
    emit("refreshList", false);
    // ElMessage.error(error);
  }
};

const closeAudit = () => {
  auditRemark.value = "";
  auditResult.value = "";
  applyId.value = "";
  auditDialogShow.value = false;
};

/**
 * @description: 保存
 * @param {Object} requestFormRef 客户表单引用
 */
const handleAddSave = async (requestFormRef, type) => {
  if (!requestFormRef) return;
  await requestFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (requestForm.value.purchaseMaterialRespVos.length > 0) {
        ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          confirmButtonClass: "confirmBtnClass",
          cancelButtonClass: "cancelBtnClass",
        })
          .then(async () => {
            requestForm.value.type = type;
            requestForm.value.deliveryDate =
              requestForm.value.deliveryDate + " 23:59:59";
            let res;
            if (!requestForm.value.purchaseApplyId) {
              // 新增客户
              res = await addRequestApi(requestForm.value);
            } else {
              // 编辑客户
              res = await editRequestApi(requestForm.value);
            }
            if (res.code === 200) {
              emit("update:requestAddShow", false);
              emit("refreshList", false);
              ElMessage.success(res.msg);
              requestForm.value = JSON.parse(
                JSON.stringify(requestFormTemplate)
              );
            } else {
              ElMessage.error(res.msg);
            }
          })
          .catch(() => {});
      } else {
        ElMessage.warning("请添加物料信息");
      }
    }
  });
};

/**
 * @description: 返回
 */
const handleBack = () => {
  if (props.pageType === "detail" || props.pageType === "check") {
    emit("updateFollowAddShow", false);
    emit("update:requestAddShow", false);
    requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
  } else {
    ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass: "confirmBtnClass",
      cancelButtonClass: "cancelBtnClass",
    })
      .then(async () => {
        emit("update:requestAddShow", false);
        requestForm.value = JSON.parse(JSON.stringify(requestFormTemplate));
      })
      .catch(() => {});
  }
};

/**
 * @description: 处理手动输入
 */
const addType = ref("");
const handleHand = () => {
  addType.value = "manual";
  contactForm.value = JSON.parse(JSON.stringify(contactFormTemplate));
  contactFormRef.value.resetFields();
};

/**
 * @description: 处理选择物料
 */
const handleMaterial = () => {
  addType.value = "select";
  contactForm.value = JSON.parse(JSON.stringify(contactFormTemplate));
  contactFormRef.value.resetFields();
  selectionMaterialShow.value = true;
};

/**
 * @description: 处理物料选择
 */
const handleSelectMaterial = (value) => {
  if (value) {
    selectionMaterialShow.value = false;
    contactForm.value.materialCode = value.materialCode;
    contactForm.value.materialName = value.materialName;
    contactForm.value.factoryCode = value.factoryCode;
    contactForm.value.technologyParameter = value.technologyParameter;
    contactForm.value.materialUnit = value.materialUnit;
    contactForm.value.materialUnitName = value.materialUnitName;
    contactForm.value.supplierName = value.distributorName;
    contactForm.value.supplierId = value.supplierId;
    contactForm.value.manufacturerId = value.manufacturerId;
    contactForm.value.manufactureName = value.manufactureName;
  } else {
    ElMessage.info("请选择物料");
  }
};

/**
 * @description: 处理供应商、生产厂家选择
 */
// const handleSuppliereSelect = (value) => {};

// const querySearch = (queryString, cb) => {
//   const results = queryString
//     ? suppliereList.value.filter(createFilter(queryString))
//     : suppliereList.value;
//   cb(results);
// };
// const createFilter = (queryString) => {
//   return (restaurant) => {
//     return (
//       restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
//     );
//   };
// };

/**
 * @description: 处理类型选择
 * @param {Number} value 选择值
 */
const handleType = (value) => {
  if (value == 2 || value == 3) {
    requestForm.value.projectId = null;
  }
  if (value == 0) {
    requestForm.value.budgetAmount = null;
  }
  requestForm.value.projectStatus = null;
  requestForm.value.includeContractName = "";
  requestForm.value.cloudServer = null;
  requestForm.value.workOrderId = null;
};

/**
 * @description: 处理项目选择
 * @param {Number} value 选择值
 */
const handleProjectChange = (value) => {
  if (value) {
    const selectedProject = projectList.value.find(
      (item) => item.projectId === value
    );
    if (selectedProject) {
      requestForm.value.projectStatus = selectedProject.projectStatus;
      requestForm.value.includeContractName =
        selectedProject.includeContractName;
    }
  } else {
    requestForm.value.projectStatus = null;
    requestForm.value.includeContractName = "";
  }
};

/**
 * @description: 处理人员选择
 * @param {Number} value 选择值
 */
const handleUserChange = (value) => {
  if (value) {
    const selectUser = userList.value.find((item) => item.userId === value);
    if (selectUser) {
      requestForm.value.deptName = selectUser.deptName;
    }
  } else {
    requestForm.value.deptName = "";
  }
};

/**
 * @description: 处理单位选择
 * @param {Number} value 选择值
 */
const handleUnitChange = (value) => {
  contactForm.value.materialUnitName =
    unitList.value.find((item) => item.value === value)?.label || "";
};

/**
 * @description: 处理供应商选择
 * @param {Number} value 选择值
 */
 const handleSupplier = (value) => {
  contactForm.value.supplierName =
  suppliereList.value.find((item) => item.supplierId === value)?.supplierName || "";
};

/**
 * @description: 处理生产厂商选择
 * @param {Number} value 选择值
 */
 const handleManufacturer = (value) => {
  contactForm.value.manufactureName =
  suppliereList.value.find((item) => item.supplierId === value)?.supplierName || "";
};


/**
 * @description: 预览照片
 * @param {String} img 图片地址
 */
const showImg = (img) => {
  let imgArr = [];
  imgArr.push(img);
  return imgArr;
};

/**
 * @description: 计算总价
 * @param {Number} value 选择值
 */
const handlePrice = (value) => {
  contactForm.value.allPrice = (
    contactForm.value.purchasePrice * contactForm.value.purchaseNumber
  ).toFixed(2);
};

/**
 * @description: 新增、编辑联系人
 * @param {Object} contactFormRef 联系人表单引用
 */
const handleContactAdd = async (contactFormRef) => {
  if (!contactFormRef) return;
  await contactFormRef.validate(async (valid) => {
    if (valid) {
      if (operateType.value === "edit") {
        requestForm.value.purchaseMaterialRespVos[tableIndex.value] =
          JSON.parse(JSON.stringify(contactForm.value));
      } else {
        requestForm.value.purchaseMaterialRespVos.push(
          JSON.parse(JSON.stringify(contactForm.value))
        );
      }
      contactForm.value = JSON.parse(JSON.stringify(contactFormTemplate));
      contactFormRef.resetFields();
      nextTick(() => {
        refInput.value && refInput.value.focus();
        if (operateType.value == "edit") {
          contactAddShow.value = false;
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response) {
  contactForm.value.suppFileInfoVos.push({ ...response, businessType: 6 });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  contactForm.value.suppFileInfoVos.splice(index, 1);
}

/**
 * @description: 处理联系人操作
 */
const handleContactOperate = () => {
  contactAddShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    refInput.value.focus();
  });
};

/**
 * @description: 联系人返回
 */
const handleRequestBack = () => {
  contactAddShow.value = false;
  nextTick(() => {
    // refSelect.value && refSelect.value.focus();
  });
};

/**
 * @description: 处理合计
 */
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    // 只对amount这一列进行总计核算。
    if (
      column.property === "purchaseNumber" ||
      column.property === "purchasePrice" ||
      column.property === "allPrice"
    ) {
      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        if (column.property !== "purchaseNumber") {
          sums[index] = sums[index].toFixed(2); // 保留2位小数，解决小数列合计精度缺失的问题
        }
        // sums[index] += "元";
      } else {
        sums[index] = "";
      }
    }
  });
  // if (props.pageType === "add" || props.pageType === "edit") {
  //   sums[8] = sums[6] * sums[7];
  //   sums[7] = "";
  // } else {
  //   sums[7] = sums[5] * sums[6];
  //   sums[6] = "";
  // }

  return sums;
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndex.value = tabIndex;
    contactForm.value = {
      ...JSON.parse(JSON.stringify(row)),
      suppFileInfoVos: JSON.parse(JSON.stringify(row)).suppFileInfoVos
        ? JSON.parse(JSON.stringify(row)).suppFileInfoVos
        : [],
    };
    contactForm.value.allPrice = (
      contactForm.value.purchasePrice * contactForm.value.purchaseNumber
    ).toFixed(2);
    contactAddShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refInput.value.focus(); // 聚焦
    });
  } else {
    requestForm.value.purchaseMaterialRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    detailInfoShow.value = true;
    const res = await getRequestDetailApi(id);
    let resTable = await getRequestTableApi(id);
    if (res && resTable) {
      resTable.forEach((item) => {
        item.allPrice = (item.purchaseNumber * item.purchasePrice).toFixed(2);
      });
      requestForm.value = {
        ...res,
        purchaseMaterialRespVos: resTable,
      };
    }
    detailInfoShow.value = false;
  } catch (error) {
    detailInfoShow.value = false;
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  // 类型
  await getDictsApi("erp_applicant_type").then((res) => {
    if (res.code === 200) {
      typeList.value = res.data;
    }
  });

  // 单位列表
  await getDictsApi("material_unit").then((res) => {
    if (res.code === 200) {
      unitList.value = res.data;
    }
  });

  // 供应商列表
  await getSupplierListApi().then((res) => {
    if (res.code === 200) {
      res.rows.forEach((item) => {
        item.value = item.supplierName;
      });
      suppliereList.value = res.rows;
    }
  });

  // 工单列表
  await getWorkListApi().then((res) => {
    workList.value = res;
  });

  // 项目列表
  await projectListRequest({ checkStatus: 3 }).then((res) => {
    if (res) {
      projectList.value = res;
    }
  });

  await getUserListApi({}).then((res) => {
    if (res.length > 0) {
      userList.value = res;
    }
    // if (res.code === 200) {
    //   userList.value = res.rows;
    // }
  });

  // // 销售部门列表
  // await getDeptListApi().then((res) => {
  //   if (res.code === 200) {
  //     deptList.value = res.data;
  //     nextTick(() => {
  //       refSelect.value.focus(); // 聚焦
  //     });
  //   }
  // });
}

onMounted(() => {
  getDicts();
  if (props.pageType === "add") {
    requestForm.value.applicantId = userStore.id;
    setTimeout(() => {
      refSelect.value && refSelect.value.focus();
    }, 1000);
  }
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.requestAdd {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  .request-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
.auto-top {
  width: 100%;
  position: absolute;
  top: 0px;
  display: flex;
  font-weight: bold;
  background-color: #fff;
  background-color: #fff;
}
.auto-item {
  width: 125px;
  text-align: left;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.el-autocomplete .el-autocomplete-suggestion {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}
:deep(.el-form-item--default) {
  margin-bottom: 22px;
}
:deep(.el-form-item--default .el-form-item__error) {
  padding-top: 5px;
}
</style>
